<template>
  <div
    class="flex items-center justify-center min-h-screen px-5 py-5 min-w-screen"
  >
    <div :id="`test`"></div>
    <div
      class="w-full overflow-hidden text-gray-500 bg-gray-100 shadow-xl rounded-3xl"
      style="max-width: 650px"
    >
      <div class="w-full md:flex">
        <div class="hidden w-1/3 px-10 py-10 bg-indigo-500 md:block"></div>
        <div class="w-full px-5 py-20 md:w-2/3 md:px-10" v-if="type === 1">
          <div class="mb-10 text-center">
            <h1 class="text-3xl font-bold text-gray-900">
              {{ $t("商户登录") }}
            </h1>
          </div>
          <LoginForm />
          <div class="flex items-center justify-between mt-4">
            <div
              class="text-[#3853ED] cursor-pointer text-sm"
              @click="handlePassword(2)"
            >
              {{ $t("忘记密码") }}
            </div>
            <div
              class="text-[#3853ED] cursor-pointer text-sm"
              @click="handlePassword(3)"
            >
              {{ $t("创建账号") }}
            </div>
          </div>
          <div class="mt-10">
            <Language />
          </div>
        </div>
        <div
          class="w-full px-5 pt-10 pb-20 md:w-2/3 md:px-10"
          v-if="type === 2"
        >
          <Forgetpassword @handleReturn="handlePassword(1)" />
        </div>
        <div
          class="w-full px-5 pt-10 pb-20 md:w-2/3 md:px-10"
          v-if="type === 3"
        >
          <CreateAccount @handleReturn="handlePassword(1)" />
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";
import Language from "./components/Language.vue";
import LoginForm from "./components/LoginForm.vue";
import Forgetpassword from "./components/ForgetPassword.vue";
import CreateAccount from "./components/createAccount.vue";
const type = ref(1);
const handlePassword = (item) => {
  type.value = item;
};
</script>
<style scoped></style>
